<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<input type="text" id="inputValue"/>
<button id="btn">打开/创建database</button>
<script>
  const openDatabase = function (version) {
    console.log('database version:', version)
    // 如果数据库不存在，open 操作会创建该数据库,第二个参数指定数据库的版本
    const request = window.indexedDB.open('MyFirstDatabase', version)
    let db = null
    request.onsuccess = function (event) {
      console.log('database success')
    }

    request.onerror = function (event) {
      console.log('database fail:', event.target.error.message)
    }

    // 当你创建一个新的数据库或者增加已存在的数据库的版本号（当打开数据库时，指定一个比之前更大的版本号）， onupgradeneeded 事件会被触发
    request.onupgradeneeded = function (event) {
      console.log('database onupgradeneeded')
      // 保存 IDBDataBase 接口
      db = event.target.result
      // 为该数据库创建一个对象仓库
      // 注意：如果你需要修改一个已存在的对象仓库（例如要修改 keyPath），你必须先删除原先的对象仓库然后使用新的设置创建。
      // 如果尝试创建一个与已存在的对象仓库重名（或删除一个不存在的对象仓库）会抛出错误。
      // db.deleteObjectStore('name')
      db.createObjectStore('name', {keyPath: 'whmkName'})
      const objectStore = db.createObjectStore('age', {keyPath: 'ageKey'})
      console.log('database result', db,objectStore)

      // 如果 onupgradeneeded 事件成功执行完成，打开数据库请求的 onsuccess 处理函数会被触发。
    }
  }
  btn.addEventListener('click', () => {
    openDatabase(Number(inputValue.value || 1))
  })
</script>
</body>
</html>
